<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h1 v-show="flag">某军</h1>
      <!-- 处理函数是一个方法的名字 -->
      <!-- 如果传递了参数，那么要使用event的话，需要明确的传递$event -->
      <button @click="handle(num,$event)">点鸡</button>
      <!-- 简单的逻辑可以使用内联语句 -->
      <button @click="flag=!flag">点鸡</button>
    </div>
  </body>
</html>
<script src="./vue.js"></script>
<script>
  // 1.作用：绑定监听事件，表达式可以是一个方法的名字或一个内联语句，
  // 如果没有修饰符也可以省略，用在普通的html元素上时，只能监听 原生DOM 事件
  // 用在自定义元素组件上时，也可以监听子组件触发的自定义事件
  const vm = new Vue({
    el: "#app",
    data: {
      num: 30,
      flag: true,
    },
    methods: {
      //所有的方法都放在这里
      handle(num, e) {
        // this指向当前的vue实例
        this.flag = !this.flag;
        console.log(e);
      },
    },
  });
</script>
